
<template>
  <div class="container-fluid bodybk">
    <div class="row novelTitle">
      <div class="col">{{ chapter.novelInfo ? chapter.novelInfo.novel_name : '未知' }}</div>
    </div>
    <div class="row text-center">
      <div class="col chapterTitle">{{chapter.chapter_title}}</div>
    </div>
    <div class="row justify-content-center text-center readMenu"></div>
<!--    <div class="row justify-content-center text-center readMenu">-->
<!--      <div class="col d-flex align-items-center justify-content-center" @click="goToChapter(chapter.prev_chapter_id)"><img class="smallicona" src="@/assets/next.png" /> 上一章</div>-->
<!--      <div class="col d-flex align-items-center justify-content-center" @click="goToBook(chapter.novelInfo.novel_id)"><img class="smalliconlist" src="@/assets/list.png" />  目录</div>-->
<!--      <div class="col d-flex align-items-center justify-content-center" @click="goToChapter(chapter.next_chapter_id)">下一章 <img class="smalliconb" src="@/assets/next.png" /> </div>-->
<!--    </div>-->
    <div class="row chapterContent">
      <div v-html="formattedContent"></div>  <!-- 使用 v-html 渲染保持原始格式 -->
    </div>
    <div class="row justify-content-center text-center readMenu">
      <div class="col d-flex align-items-center justify-content-center" @click="goToChapter(chapter.prev_chapter_id)"><span class="cursorp"><img class="smallicona" src="@/assets/next.png" /> 上一章</span></div>
      <div class="col d-flex align-items-center justify-content-center" @click="goToBook(chapter.novelInfo.novel_id)"><span class="cursorp"><img class="smalliconlist" src="@/assets/list.png" />  目录</span></div>
      <div class="col d-flex align-items-center justify-content-center" @click="goToChapter(chapter.next_chapter_id)"><span class="cursorp">下一章 <img class="smalliconb" src="@/assets/next.png" /></span></div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch, computed} from 'vue';
import {useRoute} from 'vue-router';
import axios from 'axios';
import router from "@/router/index.js";
import { ElNotification } from 'element-plus'; // 导入 Element Plus 的 Notification
import '@/assets/fonts/fonts.css';
import config from "../../../config/config.js";
const route = useRoute(); // 获取路由参数
const chapterId = route.params.chapterId; // 获取章节 ID
const content = ref(''); // 存储章节内容
const chapter = ref(''); // 存储章节信息


const goToChapter = (getchapterId) => {
  if(getchapterId){
    router.push(`/chapter/${getchapterId}`); // 路由跳转
  }else{
    showNotification();
  }
};
const showNotification = () => {
  ElNotification({
    message: '没有更多了 ~', // 消息内容
    duration: 500, // 消息显示的持续时间
  });
};
const goToBook = (getnovelId) => {
  if(getnovelId){
    router.push(`/novel/${getnovelId}`); // 路由跳转
  }
};
// 获取章节内容
const fetchChapterContent = async () => {
  try {
    const response = await axios.get(`${config.apiUrl}/novel-chapter/get?chapterId=${chapterId}`);
    chapter.value = response.data;
    content.value = response.data.chapter_content; // 存储章节内容
  } catch (error) {
    console.error("Error fetching chapter content:", error); // 错误处理
  }
};
const formattedContent = computed(() => {
  if (content.value) {
    // 替换连续的 <br> 为一个换行符
    const cleanContent = content.value.replace(/<br\s*\/?>/gi, "\n");

    // 将每一行包裹在 <p> 标签中，并去除首尾的 &nbsp;
    const lines = cleanContent.split(/\n+/).filter(Boolean); // 过滤掉空行
    const formattedLines = lines.map(line => {
      // 去除开头的 &nbsp;
      let trimmedLine = line.replace(/^(&nbsp;|[\s\uFEFF\xA0])+/gi, '');
      // 去除结尾的 &nbsp;
      trimmedLine = trimmedLine.replace(/(&nbsp;|[\s\uFEFF\xA0])+$/gi, '');
      return `<p>${trimmedLine}</p>`;
    });
    return formattedLines.join('');
  }
  return '';
});


onMounted(fetchChapterContent); // 在组件挂载时获取章节内容


</script>

<style scoped>
.novelTitle{
  color:rgba(34,34,34,.3);
  font-size: 14px;
  padding: 20px 1px;
}
.chapterTitle{
  font-size: 20px;
  font-weight: bold;
}
.readMenu{
  padding: 10px 20px 10px 20px;
  color: grey;
  font-size: 15px;
}
.readMenu .cursorp{
  cursor: pointer;
}
.bodybk{
  background-color: #f9f9f9;
}
.chapterContent{
  text-indent: 2em;
  font-size: 17px;
  font-family: hyzy55s;
}
.smalliconlist{
  width: 22px;
  margin-right: 5px;
}
.smallicona{
  width: 12px;
  margin-right: 4px;
  transform: scaleX(-1);
}
.smalliconb{
  width: 12px;
  margin-left: 4px;
}
</style>
